<template >
	<!-- 音乐导航栏 -->
	<view class="musciHead">
		<view class="headLeft">
			<view>
				<!-- 左边部分 -->
				<view class="viewLeft" :class="iconList[0] != '' ? 'viewFill': ''">
					<!-- 返回上一级标识符 -->
					<span class="iconfont" @click="returnPage">
						<!-- &#xe728; -->
						{{iconList[0]}}
					</span>
					<!-- 返回主页标识符 -->
					<span class="iconfont" @click="returnMain">
						<!-- &#xe600; -->
						{{iconList[1]}}
					</span>
				</view>
			</view>
			
			<view class="viewCenter">
				<!-- 中间部分 -->
				{{ title }}
			</view>
			
			<view class="viewLeft">
				<!-- 左右采用同意的宽度，使标题永远在中间 -->
				
			</view>
		</view>
	</view>
</template>

<script setup>  
	import {ref} from "vue";
	import {onMounted} from "vue";
	
	defineProps({
		title: String,
		iconList: Array
	});
	
	function returnPage(){
		uni.navigateBack({
			
		})
	}
	
	function returnMain(){
		uni.navigateTo({
			url: "/pages/index/index"
		})
	}
</script>

<style lang="scss">
	.headLeft{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #fff;
		width: 100%;
		height: 80rpx;
		background-color: #790000;
		.viewLeft{
			width: 150rpx;
			height: 50rpx;
			margin: 13rpx;
			margin-left: 22rpx;
			
			
		}
		.viewFill{
			
			// border: black solid 1rpx;
			border-radius: 20rpx;
			background-color: rgba(167, 167, 167, 0.7);
			display: flex;
			flex-direction: row;
			align-items: center;
			span{
				font-weight: 800;
				// padding-top: 13rpx;
				margin-left: 20rpx;
			}
		}
		.viewCenter{
			margin-top: 20rpx;
			text-align: center;
		}
		.viewRight{
			
		}
	}
</style>
